<template>
    <div class="prompts" v-if="changePromptsCode">
        <div class="prompts_b" @click="openSelect">
            <div class="p-1">Model</div>
            <div class="p-2">{{ changePromptsCode.title }}</div>
            <div class="p-i">
                <el-icon color="#acacbc" size="16">
                    <ArrowDown/>
                </el-icon>
            </div>
            <div v-if="isSelect" class="p-select" @mouseleave="leaveTo">
                <span @mousemove="moveTo(index)" @click="changeTo(index,item,$event)"
                      :class="[selectMoveIndex === index?'p-s_active':'',
                      selectClickIndex === index?'p-s_click':'']"
                      :key="JSON.stringify(item)+index"
                      v-for="(item,index) in chatData">
                    {{ item.title }}
                <el-icon size="16" v-if="selectClickIndex === index"><Check/></el-icon>
                </span>
            </div>
            <div @mouseleave="isDetails = false" @mousemove="isDetails=true" class="p-chat-details" v-if="isDetails">
                <div class="details-title">{{ chatListDetails.title }}</div>
                <div class="details-text">
                    {{ chatListDetails.introduce }}
                </div>
                <div class="details-text" v-if="chatListDetails.details1">
                    {{ chatListDetails.details1 }}
                </div>
                <div class="star-container">
                    <div class="star-warp" v-for="({max,num,name}) in chatListDetails.stars">
                        <div class="star-title">{{ name }}</div>
                        <div class="star-lists">
                            <div :class="index < num?'star-a':'star'" v-for="(item,index) in max"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import {ref, onMounted} from 'vue'
import {prompts} from "@/api/chat";
import {useStore} from "@/pinia";

const store = useStore()
let selectMoveIndex = ref<number>(0)
let selectClickIndex = ref<number>(0)
let isDetails = ref<boolean>(false)
let isSelect = ref<boolean>(false)
let chatListDetails = ref<any>({})

let chatData = ref<any>([
  {
    title: 'Default(GPT-3.5)',
    details: 'Optimized for speed, currently available to Plus users',
    details1: '',
    stars: [
      {
        max: 5,
        num: 3,
        name: 'Reasoning'
      },
      {
        max: 5,
        num: 2,
        name: 'Speed'
      },
      {
        max: 5,
        num: 4,
        name: 'Conciseness'
      },
    ]
  },
  {
    title: 'Legacy(GPT-3.5)',
    details: 'The previous ChatGPT Plus model',
    details1: '',
    stars: [
      {
        max: 5,
        num: 3,
        name: 'Reasoning'
      },
      {
        max: 5,
        num: 2,
        name: 'Speed'
      },
      {
        max: 5,
        num: 4,
        name: 'Conciseness'
      },
    ]
  }, {
    title: 'GPT-4',
    details: 'Our most advanced model, available to Plus subscribers.',
    details1: 'GPT-4 excels at tasks that require advanced reasoning, complex instruction understanding, and more creativity.',
    stars: [
      {
        max: 5,
        num: 3,
        name: 'Reasoning'
      },
      {
        max: 5,
        num: 2,
        name: 'Speed'
      },
      {
        max: 5,
        num: 4,
        name: 'Conciseness'
      },
    ]
  },
])
chatListDetails.value = chatData.value[selectClickIndex.value]
const moveTo = (index: number) => {
  isDetails.value = true
  selectMoveIndex.value = index
  chatListDetails.value = chatData.value[index]
}

interface changDataType {
  default: boolean
  introduce: string
  promptCode: string
  title: string
}
let changePromptsCode = ref<changDataType>()
const changeTo = (index: number, item: changDataType, e: Event) => {
  e.stopPropagation()
  selectClickIndex.value = index
  isSelect.value = false
  isDetails.value = false
  changePromptsCode.value = item
  store.changePromptCode(item.promptCode)
  store.changePromptName((item.title))
}
const leaveTo = () => {
  isDetails.value = false
  chatListDetails.value = chatData.value[selectClickIndex.value]
}
const openSelect = () => {
  isSelect.value = !isSelect.value
}
const getList = async () => {
  const result = await prompts()
  if (result.isSuccess) {
    chatData.value = result.data
    !localStorage.getItem('chatData')?localStorage.setItem('chatData',JSON.stringify(chatData.value)):''
    changePromptsCode.value =  (chatData.value.filter((item:any) => item.default))[0]
    store.changePromptCode(changePromptsCode.value!.promptCode)
  }
}

onMounted(async () => {
  if(!localStorage.getItem('chatData')) {
    await getList()
  }else {
    let chatList = JSON.parse((localStorage.getItem('chatData') as string))
      chatData.value = chatList
    changePromptsCode.value =  (chatList.filter((item:any) => item.default))[0]
    store.changePromptCode(changePromptsCode.value!.promptCode)
    store.changePromptName(changePromptsCode.value!.title)
  }
})

</script>

<style scoped lang="scss">
.prompts {

}

.prompts_b {
  width: 25vw;
  height: calc(58px - 16px);
  border: 1px solid var(--border-prom-color);
  border-radius: 8px;
  margin: 0 auto;
  padding: 8px 40px 8px 12px;
  position: relative;
  cursor: pointer;
  //&:active {
  //  border: 1px solid transparent;
  //  box-shadow: 0 0 0 2px rgb(16,163,127);
  //}
  //&:focus {
  //  border: 1px solid transparent;
  //  box-shadow: 0 0 0 2px rgb(16,163,127);
  //}
}

.p-select {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--border-prom-color);
  background: var(--bg-color-dark);

  span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 12px;
    padding-right: 10px;
    height: 42px;
    line-height: 42px;
    cursor: pointer;
    font-size: 12px;
    color: var(--text-color-da);
    font-weight: 400;
    border-bottom: 1px solid var(--border-prom-color);

    i {
      color: var(--text-color-da);
    }

    &:last-child {
      border-bottom: none;
    }
  }
}

.p-s_active {
  color: rgb(32, 33, 35) !important;
  background-color: rgba(236, 236, 241, .8);
  //font-weight: bold!important;
}

@media (max-width: 1024px) {
  .prompts_b {
    width: 50%;
  }
}

.p-1 {
  font-size: 12px;
  color: var(--text-color-da);
}

.p-2 {
  font-size: 14px;
  color: var(--text-color-da);
}

.p-i {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
    font-size: 0;
}

.p-chat-details {
  position: absolute;
  right: calc(100% - 1px);
  top: calc(100% + 8px);
  width: 260px;
  border-radius: 8px;
  border: 1px solid rgb(217, 217, 227);
  padding: 10px 8px;
  z-index: 10;
  background: #fff;
  //min-height: 100px;
}

.details-title {
  font-size: 16px;
  color: #000;
  //font-weight: bold;
}

.details-text {
  font-size: 12px;
  color: #000;
  margin-top: 10px;
}

.star-warp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 5px;
}

.star-title {
  font-size: 15px;
  color: rgb(52, 53, 65);
}

.star-lists {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
}

.star {
  width: 18px;
  height: 8px;
  border-radius: 10px;
  background: #ccc;
}

.star-a {
  width: 18px;
  height: 8px;
  border-radius: 10px;
  background: #10a37f;
}

.p-s_click {
  font-weight: bold !important;
}
</style>